<template>
	<view class="container">
		<NavBar title="设备进场"/>
		<scroll-view scroll-y class="list" >
			<view class="list-item">
				<view class="item-left">
					供应商
				</view>
				<view class="item-right select" @click="handleOutClick('showOutPicker')">
					<uv-text v-show="!form.supplier" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
					<text v-show="form.supplier">{{form.supplier}}</text>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					供应商合同
				</view>
				<view class="item-right select" @click="handleOutClick('showContractPicker')">
					<uv-text v-show="!form.contract" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
					<text v-show="form.contract">{{form.contract}}</text>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					设备编号
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.code" placeholder="请输入内容" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					设备类别
				</view>
				<view class="item-right select" @click="handleOutClick('showCategoryPicker')">
					<uv-text v-show="!form.category" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
					<text v-show="form.category" >{{form.category}}</text>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					设备名称
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.name" placeholder="请输入内容" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					台班单位
				</view>
				<view class="item-right select" @click="unitadd">
					<!-- <uv-input class="input" v-model="form.unit" placeholder="请输入内容" border="surround" clearable ></uv-input>
					 -->
					 <uv-text v-show="!form.unit" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
					 <text v-show="form.unit">{{form.unit}}</text>
					<!-- <view class="input-text" @click="unitadd">
						{{form.unit||'请选择'}}
					</view> -->
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					台班单价
				</view>
				<view class="item-right item-box">
					<uv-input class="input" v-model="form.unitPrice" type="number" @blur="blur('unitPrice')" placeholder="请输入内容" border="surround" clearable ></uv-input>
					<text>元</text>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					规格/型号
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.specs" placeholder="请输入内容" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					主要参数
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.parameters" placeholder="请输入内容" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					油耗定额
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.oilConsumption" placeholder="请输入内容" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					定额单位
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.consumptionUnit" placeholder="请输入内容" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					附件
				</view>
				<view class="imgfile-box" >
					<!-- <image v-show="imgFile.length!==0" v-for="item in imgFile" class="imgfile" :src="item" mode="heightFix"></image> -->
					<view class="imgfile wrap__preview" v-show="imgFile.length!==0" v-for="(item,index) in imgFile" :key="index">
						<image  class="imgfile" :src="item" mode="scaleToFill"></image>
						<view class="deletable" @click="deletePic(index)">
							<uv-icon name="close" size="10px" color="#fff"></uv-icon>
						</view>
					</view>
					<view v-show="imgFile.length<5" class="plus-icon" @click="chooseImage">
						<uv-icon name="plus"></uv-icon>
					</view>
				</view>
			</view>
			<!-- <view class="imgfile-box" >
				<image v-show="imgFile.length!==0" v-for="item in imgFile" class="imgfile" :src="item" mode="heightFix"></image>
				<view v-show="imgFile.length<5" class="plus-icon" @click="chooseImage">
					<uv-icon name="plus"></uv-icon>
				</view>
			</view> -->
			<view class="black-plack">
				
			</view>
			
		</scroll-view>
	</view>
	<view v-if="showOutPicker" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker('showOutPicker')"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker('showOutPicker')">取消</text>
	      <text class="picker-title">选择供应商</text>
	      <text class="picker-confirm" @click="confirmOut('showOutPicker')">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view class="picker-item" v-for="(item, index) in supplierList" :key="index" 
	            :class="{ 'selected': form.supplier === item.name }"
	            @click="selectOutOption(item,'supplier')">
	        <text>{{ item.name }}</text>
	      </view>
	    </scroll-view>
	  </view>
	</view>
	<view v-if="showContractPicker" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker('showContractPicker')"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker('showContractPicker')">取消</text>
	      <text class="picker-title">选择供应商合同</text>
	      <text class="picker-confirm" @click="confirmOut('showContractPicker')">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view class="picker-item" v-for="(item, index) in contractList" :key="index" 
	            :class="{ 'selected': form.contract === item.annexName }"
	            @click="selectOutOption(item,'contract')">
	        <text>{{ item.annexName }}</text>
	      </view>
	    </scroll-view>
	  </view>
	</view>
	
	<view v-if="showCategoryPicker" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker('showCategoryPicker')"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker('showCategoryPicker')">取消</text>
	      <text class="picker-title">选择设备类别</text>
	      <text class="picker-confirm" @click="confirmOut('showCategoryPicker')">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view class="picker-item" v-for="(item, index) in categoryList" :key="index" 
	            :class="{ 'selected': form.category === item.name }"
	            @click="selectOutOption(item,'category')">
	        <text>{{ item.name }}</text>
	      </view>
	    </scroll-view>
	  </view>
	</view>
	<view v-if="showunitadd" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker('showunitadd')"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker('showunitadd')">取消</text>
	      <text class="picker-title">选择台班单位</text>
	      <text class="picker-confirm" @click="confirmOut('showunitadd')">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view class="picker-item" v-for="(item, index) in unitarr" :key="index" 
	            :class="{ 'selected': form.unit === item }"
	            @click="selectOutOption(item,'unit')">
	        <text>{{ item }}</text>
	      </view>
	    </scroll-view>
	  </view>
	</view>
	<view class="but" @click="submitForm">
		提交
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { getSupplierqueryAll,queryAllByRelatedIdIdAndType,getqueryByParam,postsbmanage,queryByParam,checkCodeRepetition} from '@/utils/app.js'
	import { BASEURL } from '@/utils/request.js'
	export default {
		components:{NavBar},
		data() {
			return {
				imgList:[],
				imgFile:[],
				tempFile:[],
				maxNum:5,
				form: {
				  supplier: '',
				  contract: '',
				  code: '',
				  name: '',
				  unit: '',
				  specs: '',
				  unitPrice:'',
				  parameters: '',
				  oilConsumption: '',
				  consumptionUnit: '',
				  category: ''
				},
				id: '',
				projectId:'',
				materialGenreId:'',
				
				contractId:'',
				supplierId:'',
				contractFileId:'',
				outOptions:[],
				supplier:'',
				activeIndex:0,
				showOutPicker:false,
				showSupplierPicker: false,
				showContractPicker: false,
				showCategoryPicker: false,
				showunitadd:false,
				selectedOutOption:'',
				unitarr:['元 . 台/天','元 . 台/月','元 . 台/米'],
				supplierList: [
				  { id: 1, name: '供应商1' },
				  { id: 2, name: '供应商2' },
				  { id: 3, name: '供应商3' }
				],
				contractList: [
				  { id: 1, name: '合同1' },
				  { id: 2, name: '合同2' },
				  { id: 3, name: '合同3' }
				],
				categoryList: [
				  { id: 1, name: '挖掘机' },
				  { id: 2, name: '推土机' },
				  { id: 3, name: '装载机' },
				  { id: 4, name: '起重机' }
				],
			};
		},
		watch:{
			'imgFile.length':function(newLength, oldLength){
				console.log(newLength, oldLength);
				this.maxNum =5- newLength
			}
			
		},
		onLoad(data) {
			console.log(data);
			this.projectId=data.projectId
			this.getSupplierLists(data)
			
		},
		methods:{
			blur(e){
				if(this.form[e] < 0){
					this.form[e] = ''
					uni.showToast({
					    title: '只能输入大于0的数字',
					    icon: 'none'
					});
				}
			},
			deletePic(index) {
				// console.log(event.name,this.fileList,this[`fileList${event.name}`]);
			    this.imgFile.splice(index, 1)
				this.imgList.splice(index, 1)
			},
			getSupplierLists(data){
				getSupplierqueryAll({supplierType:2,nodeType:1,projectId:data.projectId}).then(res=>{
					console.log(res);
					if(res.code===200){
						this.supplierList=res.data
					}
					
				})
			},
			unitadd(){
				this.showunitadd = true
				// const itemList = this.unitarr
				// uni.showActionSheet({
				//     itemList,
				//     success: (res) => {
				//         this.form.unit = this.unitarr[res.tapIndex];
				//         // this.form.unit=
				// 		// console.log(selected);
				//     }
				// })
			},
			getContractLists(e){
				console.log(e);
				queryAllByRelatedIdIdAndType({relatedId:e,type:3}).then(res=>{
					console.log(res);
					this.contractList=res.data
				})
			},
			getqueryByParamList(data){
					
				getqueryByParam(data).then(res=>{
					this.categoryList=res.data
				})
			},
			getqueryByParam(e){
					
				queryByParam(e).then(res=>{
					this.contractId=res.data[0].id
				})
			},
			handleOutClick(e){
				this[e]=true
				
			},
			closeOutPicker(e) {
			  this[e]=false
			  // this.selectedOutOption = '';
			},
			confirmOut(e){
				this[e] = false;
				// this.getContractLists()
			},
			selectOutOption(data,e) {
				if(e=='supplier'){
					this.form.supplier = data.name
					// console.log(value);
					this.supplierId=data.id
					this.getContractLists(data.id)
					// projectId
					this.getqueryByParamList({projectId:data.projectId,sourceType:2})
					this.getqueryByParam({projectId:data.projectId,parentId:0})
				}
			  if(e=='contract'){
				  this.form.contract=data.annexName
				  this.contractFileId=data.id
				  
			  }
			  if(e==='category'){
				  this.form.category=data.name
				  this.materialGenreId = data.id
			  }
			  if(e=='unit'){
				  this.form.unit=data
			  }
			  
			},
			// 选择图片
			chooseImage(){
				const that = this
				uni.chooseImage({
					count: this.maxNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res)=> {
						console.log(res.tempFilePaths);
						that.tempFile=[...res.tempFilePaths]
						const token = uni.getStorageSync("token");
						that.tempFile.forEach(item=>{
							if(item.split(':')[0]!='file'){
								let p = plus.io.convertLocalFileSystemURL(item); 
								that.imgFile.push('file://'+  p)
								 uni.uploadFile({
								     url: `${BASEURL}/common/upload`, 
								      filePath:  'file://'+  p,
								 	  header: {
								 	   'Authorization': token,
								 	  },
								      name: 'file',
								      success: (uploadFileRes) => {
								          // console.log(JSON.parse(uploadFileRes.data).annexUrl);
								 		  this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								         // 获取上传服务器的地址 
								      }
								  });
							}else{
								that.imgFile.push(item)
								  uni.uploadFile({
								      url: `${BASEURL}/common/upload`, 
								       filePath:  item,
									   header: {
									    'Authorization': token,
									   },
								       name: 'file',
								       success: (uploadFileRes) => {
								           // console.log(uploadFileRes.data.annexUrl);
										   this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								          // 获取上传服务器的地址
								       }
								   });
							}
						
						})
						console.log(that.imgFile);
						console.log(result);
						
					}
				});
			},
			submitForm() {
			  // 表单验证
			  if (!this.form.supplier) {
			    uni.showToast({
			      title: '请选择供应商',
			      icon: 'none'
			    });
			    return;
			  }
			  
			  if (!this.form.contract) {
			    uni.showToast({
			      title: '请选择供应商合同',
			      icon: 'none'
			    });
			    return;
			  }
			  
			  if (!this.form.code) {
			    uni.showToast({
			      title: '请输入设备编号',
			      icon: 'none'
			    });
			    return;
			  }
			  
			  if (!this.form.name) {
			    uni.showToast({
			      title: '请输入设备名称',
			      icon: 'none'
			    });
			    return;
			  }
			  checkCodeRepetition({projectId:this.projectId,code:this.form.code}).then(res=>{
				  if(res.data>0){
					  uni.showToast({
					    title: '设备编码重复',
					    icon: 'none'
					  });
					  return;
				  }else{
					  const data=JSON.parse(JSON.stringify(this.form))
					  delete data.category
					  delete data.supplier
					  delete data.contract
					  console.log(data);
					  const obj ={...data,contractFileId:this.contractFileId,supplierId:this.supplierId,contractId:this.contractId,projectId:this.projectId,materialGenreId:this.materialGenreId,status:2,nodeType:1}
					  console.log(obj);
					  postsbmanage({...obj,attachmentUrl:this.imgList.join(',')}).then(res=>{
					  if(res.code==200){
						  uni.showToast({
						      title: '提交成功',
						      icon: 'success'
						    });
							this.form={}
							this.imgList=[]
							this.imgFile=[]
							this.tempFile=[]
							this.maxNum=5
							uni.switchTab({
								url:'/pages/facility/index'
							})
					  }
					  console.log(res);
					  })
				  }
			  })
			  
			  
			  // console.log();
			  // 模拟提交
			  // setTimeout(() => {
			  //   uni.hideLoading();
			  //   uni.showToast({
			  //     title: '提交成功',
			  //     icon: 'success'
			  //   });
			    
			  //   // 返回上一页
			  //   setTimeout(() => {
			  //     uni.navigateBack();
			  //   }, 1500);
			  // }, 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
.list{
	height: calc(100vh - 180rpx);
	padding: 0 30rpx;
	background-color: #fff;
	.black-plack{
		height: 300rpx;
	}
	
	.imgfile{
		height: 100rpx;
		width: 100rpx;
		margin-right: 8rpx;
	}
	.wrap__preview{
		position: relative;
	}
	.deletable{
		position: absolute;
		top: 0;
		right: 0;
		width: 28rpx;
		height: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom-left-radius: 100px;
		background-color: #373737;
	}
	.imgfile-box{
		display: flex;
	}
	.plus-icon{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #E6EAF3;
		border-radius: 10rpx;
	}
	.list-item{
		display: flex;
		align-items: center;
		height: 112rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid #C9CDD4;
		
		.select{
			display: flex;
			align-items: center;
			padding-left: 28rpx;
		}
		.item-left{
			margin-right: 32rpx;
			width: 160rpx;
		}
		
		.item-right{
			flex: 1;
		}
		.item-box{
			display: flex;
			align-items: center;
			
			text{
				width: 160rpx;
			}
		}
		.input-text{
			margin-left: 24rpx;
			font-size: 24rpx;
			color: rgb(48, 49, 51)
		}
		.input{
			border: 0;
		}
	}
}
/* 修改底部弹出层部分 */
	.picker-container {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  top: 0;
	  z-index: 100;
	}
	
	.picker-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.4);
	}
	
	.picker-content {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #FFFFFF;
	  border-top-left-radius: 16px;
	  border-top-right-radius: 16px;
	}
	
	.picker-header {
	  display: flex;
	  height: 53px;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 16px;
	  border-bottom-width: 1px;
	  border-bottom-color: #EEF2F9;
	  margin-bottom: 30rpx;
	}
	
	.picker-title {
	  font-size: 16px;
	  color: #1D2129;
	  font-weight: 400;
	}
	
	.picker-cancel, .picker-confirm {
	  font-size: 16px;
	}
	
	.picker-cancel {
	  color: #86909C;
	}
	
	.picker-confirm {
	  color: #165DFF;
	}
	
	.picker-list {
	  padding: 24rpx 0;
	  max-height: 350rpx;
	  /* overflow: scroll; */
	}
	
	.picker-item {
		display: flex;
	  height: 44px;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  padding: 0 16px;
	}
	
	.picker-item text {
	  font-size: 16px;
	  color: #1D2129;
	}
	.selected{
		background-color: #EEF2F9;
	}
	
	.but{
		position: fixed;
		bottom:60rpx;
		left: 60rpx;
		width: 630rpx;
		height: 88rpx;
		border-radius: 88rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		text-align: center;
		color: #165DFF;
		background-color: #E8F3FF;
	}
</style>
